Skip to content

docs(qa): web UI manual QA pass + fix grid column overflow (closes #28)#34

Merged
wpak-ai merged 5 commits into
masterfrom
feat/web-ui-qa-28
May 15, 2026
Merged

docs(qa): web UI manual QA pass + fix grid column overflow (closes #28)#34
wpak-ai merged 5 commits into
masterfrom
feat/web-ui-qa-28

Conversation

@timon0305
Copy link
Copy Markdown
Collaborator

@timon0305 timon0305 commented May 14, 2026

Closes #28.

Summary

  • Manual QA pass against all 10 acceptance criteria. 10 screenshots in samples/qa/ (home / workspace / conversation / search / config × Chrome + Firefox) embedded inline in tests/web-ui-qa-checklist.md.
  • Found and fixed one visual bug during the pass: .main-content grid column overflowed the viewport whenever a bubble contained an unbreakable child (long code block, long URL, long tool-call output). One-line CSS fix: .main-content { min-width: 0 } so existing overflow-x: auto on .prose pre can take over inside the bubble. WHY comment alongside it in static/css/style.css.
  • Added tests/web-ui-smoke.sh — boots the app on an alt port, probes 11 routes, exits non-zero on any unexpected status. Runs in ~6s.

Verification highlights

  • 11/11 smoke probes pass.
  • All 5 export formats (md/html/json/csv/pdf) download from both Chrome and Firefox. .md / .html / .json / .csv are byte-identical across browsers (cmp -s returns equal) — proves the JS pipeline in static/js/download.js is browser-agnostic. PDF bytes differ because /api/generate-pdf embeds a fresh /CreationDate; both browsers produce valid 153-page PDFs.
  • Backend data shape spot-checked on the sampled tab: 387 bubbles, with toolCalls (name=glob_file_search, status=completed) and thinking blocks (durationMs=3569) present.

Test plan

  • bash tests/web-ui-smoke.sh — 11/11 pass
  • python app.py — boots clean, GET / returns 200
  • Visual QA checklist (tests/web-ui-qa-checklist.md) — every applicable checkbox ticked with backend evidence or screenshot
  • Cross-browser export downloads verified Chrome + Firefox
  • CI green
  • Reviewer approves

Summary by CodeRabbit

  • Bug Fixes

    • Fixed grid overflow so long inline content (e.g., code blocks, long URLs) can scroll instead of forcing horizontal overflow.
    • Truncated sidebar timestamps/badges to prevent overflow in narrow columns.
  • Tests

    • Added a comprehensive Web UI manual QA checklist covering routes, rendering, exports, and regression verification.
    • Added an automated smoke test to validate app startup, key API endpoints, and primary web routes.

Review Change Stack

Documents and verifies the web UI against all 10 acceptance criteria
from issue #28, plus one visual bug surfaced during the pass and
fixed in the same PR.

Bug fix:
* `.main-content` grid column was overflowing the viewport on the
  right whenever a bubble contained an unbreakable child (long code
  block, long URL, long tool-call output). Header + title rendered
  fine because they live outside the grid. Cause: grid items default
  to `min-width: auto`, which refuses to shrink below intrinsic
  min-content. Fix: add `.main-content { min-width: 0 }` so the
  existing `overflow-x: auto` on `.prose pre` and
  `word-break: break-all` on `.tool-call-content` can take over inside
  the bubble.

QA artifacts:
* `tests/web-ui-qa-checklist.md` — 9 sections covering: environment,
  server launch, 5 major views (home, workspace, conversation, search,
  config), exports, cross-browser parity, regression notes, sign-off.
  Every check that could be answered backend-side is filled in with
  the actual probe / inspection result.

* `tests/web-ui-smoke.sh` — boots app.py on an alt port and probes
  11 routes (page routes + JSON API + workspace-scoped routes).
  Exits non-zero on any unexpected status.

* `samples/qa/*.png` — 10 screenshots, Chrome + Firefox for home,
  workspace detail, conversation view, search results, and config.

Verification highlights:
  - 11/11 smoke probes pass
  - All 5 export formats download from both Chrome and Firefox
  - .md / .html / .json / .csv are byte-identical across browsers
    (proves the JS pipeline in static/js/download.js is portable)
  - PDF is a valid 153-page document (Chrome + Firefox both produce
    valid 153-page PDFs; bytes differ because the server embeds a
    fresh /CreationDate on each /api/generate-pdf call)
  - Backend data shape verified: a sampled conversation tab carries
    387 bubbles, including toolCalls (name="glob_file_search",
    status="completed") and thinking blocks (durationMs=3569)
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 14, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0a9b564e-d0b1-497c-be4d-58137d51e4ea

📥 Commits

Reviewing files that changed from the base of the PR and between fdbb940 and cc2a8f4.

📒 Files selected for processing (2)
  • static/css/style.css
  • tests/web-ui-qa-checklist.md

📝 Walkthrough

Walkthrough

Adds two CSS fixes to prevent horizontal overflow and truncation in sidebar timestamps, and introduces a comprehensive manual Web UI QA checklist documenting server-launch probes, per-route visual/API checks, export validation, cross-browser parity, regression notes, and sign-off steps.

Changes

Web UI QA and Testing Infrastructure

Layer / File(s) Summary
CSS overflow containment fix
static/css/style.css
Adds .main-content { min-width: 0; } to allow the main grid column to shrink when it contains unbroken long content, and updates .sidebar-item-time with overflow: hidden; text-overflow: ellipsis; white-space: nowrap; to prevent badge/timestamp overflow.
Manual QA checklist and regression notes
tests/web-ui-qa-checklist.md
Adds a step-by-step QA checklist: environment capture, server-launch pass/fail criteria, per-route visual/API checks (home, workspace, conversation, search, config), export format validation, cross-browser parity checks, regression notes referencing the CSS fixes, and sign-off items.

🐰 A stylesheet fix hops into view,
With smoke tests to validate what's true,
A checklist complete from home to export,
Chrome and Firefox both give report!
QA passes with screenshots in store. ✨

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main changes: a QA documentation pass with manual testing and a CSS grid overflow fix, directly matching the changeset content.
Linked Issues check ✅ Passed The PR comprehensively addresses all coding-related acceptance criteria from issue #28: manual QA checklist with screenshots, markdown/tool/thinking verification, export format testing, search testing, cross-browser testing (Chrome/Firefox), CSS fixes, and smoke test automation.
Out of Scope Changes check ✅ Passed All changes are directly scoped to issue #28 requirements: CSS fixes for grid overflow, QA checklist documentation, and smoke test script for automated verification of UI functionality.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/web-ui-qa-28

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/web-ui-qa-checklist.md`:
- Around line 211-214: The fenced code block containing the HTTP example
starting with "POST /api/generate-pdf" lacks a language hint which triggers
markdownlint MD040; update that fenced block to include a language identifier
(e.g., add "text" after the opening ``` fence) so the block becomes ```text ...
``` ensuring the markdown linter accepts it while preserving the exact block
content and formatting.

In `@tests/web-ui-smoke.sh`:
- Around line 23-39: The script's curl calls can hang because they lack
timeouts; update every curl invocation (including the initial readiness loop and
the probe() function) to set both connection and overall time limits by adding
--connect-timeout and --max-time (or -m) flags so each HTTP request fails fast
on stalls, and ensure the same timeout options are applied to the other curl
calls referenced later (the block around probe and the calls at lines ~61-68) so
the smoke test never blocks indefinitely.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8d0ba010-eea7-40c9-a079-1abbd93b19b2

📥 Commits

Reviewing files that changed from the base of the PR and between 95d3140 and 7baff7d.

⛔ Files ignored due to path filters (10)
  • samples/qa/config-chrome.png is excluded by !**/*.png
  • samples/qa/config-firefox.png is excluded by !**/*.png
  • samples/qa/conversation-chrome.png is excluded by !**/*.png
  • samples/qa/conversation-firefox.png is excluded by !**/*.png
  • samples/qa/home-chrome.png is excluded by !**/*.png
  • samples/qa/home-firefox.png is excluded by !**/*.png
  • samples/qa/search-results-chrome.png is excluded by !**/*.png
  • samples/qa/search-results-firefox.png is excluded by !**/*.png
  • samples/qa/workspace-chrome.png is excluded by !**/*.png
  • samples/qa/workspace-firefox.png is excluded by !**/*.png
📒 Files selected for processing (3)
  • static/css/style.css
  • tests/web-ui-qa-checklist.md
  • tests/web-ui-smoke.sh

Comment thread tests/web-ui-qa-checklist.md Outdated
Comment thread tests/web-ui-smoke.sh Outdated
@timon0305 timon0305 self-assigned this May 14, 2026
Two CodeRabbit follow-ups on PR #34:

* tests/web-ui-qa-checklist.md: the fenced block describing the
  /api/generate-pdf probe was missing a language hint and tripped
  markdownlint MD040. Tagged as `text`.

* tests/web-ui-smoke.sh: every curl call now goes through
  CURL_FLAGS=(--silent --show-error --connect-timeout 2 --max-time 5)
  so a stalled socket can't hang the script indefinitely. The boot-wait
  loop also redirects stderr to /dev/null because connection-refused
  during the polling phase is expected; if the wait times out, the
  final fall-through check re-runs with stderr visible so the failure
  reason is preserved.

Verified: bash tests/web-ui-smoke.sh — 11/11 pass, no noise on stdout.
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/web-ui-smoke.sh`:
- Around line 66-84: The WS_ID assignment currently swallows JSON parse errors
in the inline python (the python3 -c block used with the curl output), causing
malformed /api/workspaces responses to be treated as "no workspace" and skipping
probes; update that block so JSON parsing errors raise a non-zero exit (print a
clear error to stderr and exit 1) instead of suppressing them: modify the python
snippet run in the WS_ID assignment to catch json.JSONDecodeError (or let
exceptions propagate) and write an error message to stderr before exiting
non-zero, so the surrounding script fails fast when /api/workspaces returns
invalid JSON and does not silently skip the workspace-scoped probes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 412fede0-fb62-46f1-825d-96df01936792

📥 Commits

Reviewing files that changed from the base of the PR and between 7baff7d and 590dc21.

📒 Files selected for processing (2)
  • tests/web-ui-qa-checklist.md
  • tests/web-ui-smoke.sh
✅ Files skipped from review due to trivial changes (1)
  • tests/web-ui-qa-checklist.md

Comment thread tests/web-ui-smoke.sh Outdated
The WS_ID extraction was suppressing python3's stderr with `2>/dev/null`
and treating a missing parse result the same as "no non-global workspace
exists". So /api/workspaces returning 200 with malformed JSON would
silently skip the three workspace-scoped probes and the script would
still exit 0 — a false green.

Wrapped the parse in `if ... ; then ... else fail=$((fail+1)); fi` so
python3's non-zero exit (raised by json.load on bad input) routes
through the FAIL printf, the workspace block is skipped explicitly,
and the script exits non-zero with the rest of the failures.

Happy path: 11/11 probes still pass.
@timon0305 timon0305 requested a review from bradjin8 May 14, 2026 15:03
Comment thread tests/web-ui-qa-checklist.md Outdated
Comment thread tests/web-ui-qa-checklist.md Outdated
Comment thread tests/web-ui-qa-checklist.md Outdated
Comment thread tests/web-ui-smoke.sh
Comment thread tests/web-ui-smoke.sh
Comment thread static/css/style.css
Five PR #34 review findings closed in one commit. All polish; no
behaviour change on the happy path.

Checklist (tests/web-ui-qa-checklist.md):
* §6 export-frontmatter table was citing the CLI export schema
  (log_id / workspace / created_at / updated_at). The web UI pipeline
  in static/js/download.js actually emits title / created /
  conversation_id (plus optional models_used / token / cost). Fixed,
  with an inline NOTE so a future reader doesn't swap them back.
* §7 cross-browser-parity table was unfinished AND tested phantom
  features (per-bubble copy button + arrow-key sidebar nav don't
  exist in the codebase). Replaced with the four checks that target
  features actually shipped today; phantom rows documented as
  enhancement ideas.
* §8 post-fix screenshot row was an unticked TODO even though the
  workspace + conversation screenshots in samples/qa/ were captured
  after the .main-content fix landed. Flipped to [x] with explicit
  evidence pointer.
* §9 sign-off table was empty rows. Filled in with this PR's state
  (4 of 5 rows resolved; reviewer-approval row stays pending).
* Added a verification-method legend at the top so a reviewer can tell
  visual vs probe vs code-inferred vs deferred (⏳) ticks apart. The
  default is "visual"; deviations carry an explicit tag.

Smoke script (tests/web-ui-smoke.sh):
* Page-route probes now sniff the body for the expected `<title>`
  string in addition to the 200 status, so an "empty 200" template
  regression can no longer slip through.
* Workspace-scoped probes no longer skip silently when /api/workspaces
  returns no non-global rows — the message is now a loud [WARN] block
  in the output, and the new env var CLAW_QA_REQUIRE_WORKSPACE=1
  converts the skip into a hard failure for CI runs that seed fixture
  data. Documented in the script header.

Verified: bash tests/web-ui-smoke.sh — 11/11 pass with body sniff;
negative test (fake needle) correctly exits 1 with the missing-needle
message; empty-workspace test with CLAW_QA_REQUIRE_WORKSPACE=1 exits 1
as expected.
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/web-ui-qa-checklist.md`:
- Line 14: The heading "### Verification-method legend" is incorrectly jumping
two levels under the top-level heading (triggering MD001); change it to a
one-level increment (use "## Verification-method legend") so it follows the
parent "#" heading hierarchy and satisfies markdownlint rules.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 742eebb9-9026-4696-9091-c904788442cd

📥 Commits

Reviewing files that changed from the base of the PR and between a6c3ae9 and fdbb940.

📒 Files selected for processing (2)
  • tests/web-ui-qa-checklist.md
  • tests/web-ui-smoke.sh

Comment thread tests/web-ui-qa-checklist.md Outdated
Brad's review on PR #34 flagged that .sidebar-item-title already
truncates with overflow: hidden + text-overflow: ellipsis +
white-space: nowrap, but the .sidebar-item-time row beneath it had
no overflow handling. A long model badge or localised timestamp
would overflow the fixed 280px .sidebar column horizontally.

Mirrored the title row's three properties on .sidebar-item-time so
the truncation is symmetric. Invisible on current data (timestamps +
model names fit today) — forward-looking guard against a future
sidebar-child addition.

§8 of tests/web-ui-qa-checklist.md updated to list both this and the
.main-content overflow fix as regression notes for PR #34.
@timon0305 timon0305 requested a review from wpak-ai May 15, 2026 12:58
@wpak-ai wpak-ai merged commit 849f696 into master May 15, 2026
6 checks passed
@wpak-ai wpak-ai deleted the feat/web-ui-qa-28 branch May 15, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Web UI QA: manual testing with screenshots/video of browsing flow

3 participants